import "./TodoList.css";
import TodoHeader from "./TodoHeader/TodoHeader";
import TodoMain from "./TodoMain/TodoMain";
import TodoFooter from "./TodoFooter";
import { useEffect, useState } from "react";
import instance from "../../utils/request";

let TodoList = () => {
  //定义任务列表的状态
  let [todos, setTodos] = useState([]);

  //封装函数实现任务的新增  addTodo('要买洗发水')
  let addTodo = async (title) => {
    try {
      //发送请求  data 数据类型有两种 1. 对象 (JSON)   2. 字符串(querystring 查询字符串)
      let result = await instance.post("/todos", {
        title: title,
        done: false,
      });
      //更新状态
      setTodos([...todos, result]);
    } catch (e) {
      throw e;
    }
  };

  //封装函数实现任务的删除
  let removeTodo = async (id) => {
    //发送 AJAX 请求   {status, statusText, headers, data}
    await instance.delete(`/todos/${id}`);
    //删除
    //方式一 遍历检测
    // let result = [];
    // //遍历 todos
    // todos.forEach(item => {
    // 	if(item.id !== id){
    // 		result.push(item);
    // 	}
    // });
    // console.log(result);
    //方式二
    let result = todos.filter((item) => item.id !== id);
    //更新
    setTodos(result);
  };

  //封装函数更新任务的完成状态  1  true
  let checkTodo = async (id, done) => {
    //遍历数组 反例 这种写法是不可行的 ❌
    // todos.forEach(item => {
    // 	//判断
    // 	if(item.id === id){
    // 		//更新任务的完成状态
    // 		item.done = done;
    // 	}
    // });
    //发送请求
    await instance.patch(`/todos/${id}`, {done: done})
    //使用 map 方法   ✅
    let newTodos = todos.map((item) => {
      //判断
      if (item.id === id) {
        //更新任务的完成状态
        item.done = done;
      }
      return item;
    });

    //更新状态
    setTodos(newTodos);
  };

  //封装函数批量更新任务的完成状态
  let checkAllTodo = (done) => {
    //更新状态
    let newTodos = todos.map((item) => {
      //更新每个任务的完成状态
      item.done = done;
      return item;
    });
    //更新状态
    setTodos(newTodos);
  };

  //封装函数批量移除已经完成的任务
  let batchRemoveTodos = () => {
    //过滤
    let newTodos = todos.filter((item) => item.done !== true);
    //更新状态
    setTodos(newTodos);
  };

  //useEffect
  useEffect(() => {
    //测试新增新增任务的功能
    // addTodo("要买洗发水");
    //测试删除功能
    // removeTodo(1);
    //更新任务的完成状态
    // checkTodo(2, false);
    //批量更新
    // checkAllTodo(true);
    //批量移除已经完成的任务
    // batchRemoveTodos();
    //测试 nprogress
    // NProgress.start();
    // setTimeout(() => {
    //   NProgress.done();
    // }, 2000);
  }, []);

  //useEffect 模拟组件挂载完成的操作
  useEffect(() => {
    //声明函数
    let getData = async () => {
      //发送 ajax 请求
      let result = await instance.get("/todos");
      setTodos(result);
    };
    //调用函数
    getData();
  }, []);

  //返回虚拟 DOM 对象
  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <TodoHeader addTodo={addTodo} />
        <TodoMain todos={todos} removeTodo={removeTodo} checkTodo={checkTodo} />
        <TodoFooter
          todos={todos}
          checkAllTodo={checkAllTodo}
          batchRemoveTodos={batchRemoveTodos}
        />
      </div>
    </div>
  );
};

//暴露
export default TodoList;
